<!-- 吸毒人员 -->
<template lang="html">
 <div class="main">
   <panel title="易涉毒物品" class="panel">
     <div class="" slot="right">
       <el-select v-model="year" size="small" style="width: 120px;">
           <el-option
             v-for="item in [2017]"
             :key="item"
             :label="item === 2017 ? '今天' : `${item + 1}年`"
             :value="item">
           </el-option>
         </el-select>
     </div>
     <div class="body">
       <div class="body-pie">
         <div class="item">
           <div id="stat_ysdwp" class="chart">
           </div>
         </div>
       </div>
       <div class="body-map"  v-loading="loading" element-loading-text="拼命加载中" element-loading-background="transparent">
         <div class="map-title" v-show="showLabel">
           【{{selectPlace}}】
         </div>
         <div class="map-title-2" v-show="showLabel">
           <div>麻精药品：{{num.mjyp}}家</div>
           <div>易制毒化学品：{{num.yzdhxp}}家</div>
           <div>新精神活性物质：{{num.xjshxwz}}家</div>
           <div>易制毒设备：{{num.yzdsb}}家</div>
         </div>
         <div class="map" id="stat_wrxdl_map">
         </div>
       </div>
     </div>
   </panel>
 </div>
</template>

<script>
import panel from '@/components/panel.vue';
import {ShMapData} from '@/common/js/sh-map-data';
// import {fetchStatDrugNum} from '@/common/api';
export default {
  data () {
    return {
      selectPlace: '',
      showLabel: false,
      year: 2017,
      charts: {},
      loading: false,
      num: {
        'mjyp': 0,
        'yzdhxp': 0,
        'xjshxwz': 0,
        'yzdsb': 0
      },
      data: [],
      notShowTitle: [
        '虹口区',
        '长宁区',
        '静安区',
        '黄浦区',
        '普陀区',
        '徐汇区',
        '杨浦区'
      ]
    };
  },
  components: {
    panel
  },
  watch: {
    year (v) {
      // TODO 查询年刷新图表
      this.fetchData();
    },
    selectPlace (v) {
      let name = v === '全市' ? '上海' : v;
      let place = this.data.find(n => n.name === name);
      this.num = {
        'mjyp': place.mjyp,
        'yzdhxp': place.yzdhxp,
        'xjshxwz': place.xjshxwz,
        'yzdsb': place.yzdsb
      };
    }
  },
  methods: {
    drawPie (id, { name, data }) { // 画大饼
      let chart = this.charts[id];
      let option = {
        // title: {
        //   x: 'center',
        //   text: 'ECharts例子个数统计',
        //   subtext: 'Rainbow bar example',
        //   link: 'http://echarts.baidu.com/doc/example.html'
        // },
        tooltip: {
          trigger: 'item'
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     dataView: {show: true, readOnly: false},
        //     restore: {show: true},
        //     saveAsImage: {show: true}
        //   }
        // },
        calculable: true,
        grid: {
          borderWidth: 0,
          y: 80,
          y2: 60
        },
        xAxis: [
          {
            type: 'category',
            show: false,
            data: data.map(d => d.name)
          }
        ],
        yAxis: [
          {
            type: 'value',
            show: false
          }
        ],
        series: [
          {
            name: name,
            type: 'bar',
            itemStyle: {
              normal: {
                color: function (params) {
                  return data[params.dataIndex].color;
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}'
                }
              }
            },
            data: data.map(d => d.value)
          }
        ]
      };
      chart.setOption(option, true);
    },
    drawMap (id) {
      // 社会面
      let h = 0;
      let l = 0;
      let sh = this.data.find(d => d.name === '上海');
      let data = this.data.filter(d => d.name !== '上海').map(d => {
        let v = d.mjyp + d.yzdhxp + d.xjshxwz + d.yzdsb;
        if (v > h) {
          h = v;
        }
        if (l === 0 || v < l) {
          l = v;
        }
        return {name: d.name, value: v, mjyp: d.mjyp, yzdhxp: d.yzdhxp, xjshxwz: d.xjshxwz, yzdsb: d.yzdsb};
      });
      let chart = this.charts[id];
      chart.hideLoading();
      this.$echarts.registerMap('SH', ShMapData);
      chart.setOption({
        title: {
          top: '90%',
          left: '3%',
          text: '上海市',
          subtext: (this.year + 1) + '各区易涉毒物品企事业单位数量情况'
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{b}<br/>{c} (人)'
          formatter (d) {
            return `${d.name}（${d.value}家）<br/><div style="text-align: left;">
            麻精药品数：${d.data.mjyp}家【${(d.data.mjyp / sh.mjyp * 100).toFixed(2)}%】<br/>
            易制毒化学品数：${d.data.yzdhxp}家【${(d.data.yzdhxp / sh.yzdhxp * 100).toFixed(2)}%】<br/>
            新精神活性物质数：${d.data.xjshxwz}家【${(d.data.xjshxwz / sh.xjshxwz * 100).toFixed(2)}%】<br/>
            易制毒设备数：${d.data.yzdsb}家【${(d.data.yzdsb / sh.yzdsb * 100).toFixed(2)}%】</div>`;
          }
        },
        visualMap: {
          show: true,
          min: l,
          max: h,
          text: ['高', '低'],
          left: '86%', // 组件离容器左侧的距离,'left', 'center', 'right','20%'
          top: '2%',
          // orient: 'horizontal',
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#78aede', '#478fcf', '#3b82c4']
          }
        },
        series: [
          {
            name: '上海市各区易涉毒物品统计',
            type: 'map',
            selectedMode: 'single',
            mapType: 'SH', // 自定义扩展图表类型
            zoom: 1.2,
            itemStyle: {
              normal: {label: {
                show: true,
                formatter: (params) => {
                  if (this.notShowTitle.indexOf(params.data.name) !== -1) {
                    return '';
                  }
                }
              }},
              emphasis: {
                label: {show: true, color: '#fff'},
                borderWidth: 2,
                borderColor: '#efefef',
                areaColor: '#51ade7'
              }
            },
            data: data
          }
        ]
      });
      chart.on('mapselectchanged', (param) => {
        let name = param.batch[0].name;
        let select = param.batch[0].selected[name];
        if (select) {
          // 选中
          this.selectPlace = name;
          this.load(this.data.find(n => n.name === name));
        } else {
          this.selectPlace = '全市';
          this.load(this.data.find(n => n.name === '上海'));
        }
      });
    },
    load ({mjyp = 0, yzdhxp = 0, xjshxwz = 0, yzdsb = 0}) {
      this.drawPie('stat_ysdwp', {name: '易涉毒物品',
        data: [
          {value: mjyp, name: '麻精药品', color: '#C8AA3E'},
          {value: yzdhxp, name: '易制毒化学品', color: '#78aede'},
          {value: xjshxwz, name: '新精神活性物质', color: '#42A851'},
          {value: yzdsb, name: '易制毒设备', color: '#438C79'}
        ]});
    },
    fetchData () {
      this.load({});
      this.loading = true;
      this.data = [
        {name: '上海', mjyp: 6038, yzdhxp: 14086, xjshxwz: 8380, yzdsb: 4128},
        {name: '崇明区', mjyp: 620, yzdhxp: 2102, xjshxwz: 1261, yzdsb: 1012},
        {name: '浦东新区', mjyp: 2123, yzdhxp: 1602, xjshxwz: 1427, yzdsb: 1083},
        {name: '奉贤区', mjyp: 110, yzdhxp: 680, xjshxwz: 987, yzdsb: 610},
        {name: '金山区', mjyp: 634, yzdhxp: 1201, xjshxwz: 1126, yzdsb: 420},
        {name: '青浦区', mjyp: 521, yzdhxp: 1402, xjshxwz: 892, yzdsb: 239},
        {name: '松江区', mjyp: 522, yzdhxp: 1231, xjshxwz: 799, yzdsb: 196},
        {name: '嘉定区', mjyp: 700, yzdhxp: 1351, xjshxwz: 652, yzdsb: 121},
        {name: '宝山区', mjyp: 501, yzdhxp: 780, xjshxwz: 368, yzdsb: 154},
        {name: '闵行区', mjyp: 99, yzdhxp: 712, xjshxwz: 210, yzdsb: 75},
        {name: '杨浦区', mjyp: 70, yzdhxp: 352, xjshxwz: 110, yzdsb: 113},
        {name: '普陀区', mjyp: 23, yzdhxp: 329, xjshxwz: 186, yzdsb: 42},
        {name: '徐汇区', mjyp: 49, yzdhxp: 521, xjshxwz: 68, yzdsb: 21},
        {name: '长宁区', mjyp: 13, yzdhxp: 498, xjshxwz: 127, yzdsb: 10},
        {name: '虹口区', mjyp: 17, yzdhxp: 539, xjshxwz: 48, yzdsb: 16},
        {name: '静安区', mjyp: 20, yzdhxp: 601, xjshxwz: 93, yzdsb: 9},
        {name: '黄浦区', mjyp: 16, yzdhxp: 185, xjshxwz: 25, yzdsb: 7}
      ];
      this.selectPlace = '全市';
      let sh = this.data.find(d => d.name === '上海');
      this.load(sh);
      this.num = {
        'mjyp': sh.mjyp,
        'yzdhxp': sh.yzdhxp,
        'xjshxwz': sh.xjshxwz,
        'yzdsb': sh.yzdsb
      };
      this.loading = false;
      this.drawMap('stat_wrxdl_map');
      this.showLabel = true;
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.charts['stat_wrxdl_map'] = this.$echarts.init(document.getElementById('stat_wrxdl_map'));
      this.charts['stat_ysdwp'] = this.$echarts.init(document.getElementById('stat_ysdwp'));
      window.addEventListener('resize', () => {
        this.charts['stat_wrxdl_map'].resize();
        this.charts['stat_ysdwp'].resize();
      });
    });
    setTimeout(_ => {
      this.loading = true;
      this.fetchData();
    }, 600);
  }
};
</script>

<style lang="css" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  .panel {
    height: 100%;
    width: 100%;
    position: relative;
   .body {
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: stretch;
     padding-left: 10px;
     .body-pie {
       width: 40%;
       height: 100%;
       display: flex;
       padding: 5px;
       flex-direction: column;
       .item {
         width: 100%;
         height: 100%;
         position: relative;
         .chart {
           position: absolute;
           z-index: 1;
           width: 100%;
           height: 100%;
         }
       }
       .item::after {
         content: '';
         position: absolute;
         width: 90%;
         height: 3px;
         top: 98%;
         left: 5%;
         right: 5%;
         overflow: hidden;
         /* border-top: 1px solid  rgba(150,150,150,.5); */
         border-bottom: 1px solid  rgba(255,255,255,1);
         background-color: #eee;
       }
     }
     .body-map {
       width: 60%;
       margin: 5px;
       position: relative;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
       .map-title {
         position: absolute;
         left: 5px;
         top: 20px;
         font-size: 20px;
         color: #1A71C1;
         font-weight: 600;
       }
       .map-title-2 {
         position: absolute;
         text-align: left;
         left: 20px;
         top: 50px;
         font-size: 14px;
         color: #666;
       }
       .map {
         width: 100%;
         height: 100%;
         /* width: 120%;
         height: 120%;
         margin-top: -50px;
         margin-left: -60px; */
         /* background-color: rgba(0,0,0,.5); */
       }
     }
     .body-map::before {
       content: '';
       position: absolute;
       width: 3px;
       height: 92%;
       top: 4%;
       left: -3px;
       overflow: hidden;
       /* border-left: 1px solid  rgba(150,150,150,.5); */
       border-right: 1px solid  rgba(255,255,255,1);
       background-color: #eee;
     }
   }
  }
}

</style>
